import React from "react";
import styles from "./less/index.less"
import OtherProfessionalSkillsTag from "@/pages/AboutMe/Components/OtherProfessionalSkills/OtherProfessionalSkillsTag";

const OtherProfessionalSkills = (props: { showOrHiddenOtherProfessionalSkills: boolean }) => {
    const initOtherProfessionalSkillsTag = () => {
        const otherProfessionalSkillsTagArray = [{name: "docker"}, {name: "linux"}, {name: "node.js"}, {name: "数据库"}, {name: "随笔"}, {name: "python"}, {name: "折腾"}, {name: "计算机网络"}]
        let tempArray: Array<React.ReactNode> = []
        otherProfessionalSkillsTagArray.forEach(item => {
            tempArray.push(
                <div className={styles["skill-box"]}><OtherProfessionalSkillsTag
                    name={item.name}></OtherProfessionalSkillsTag></div>
            )
        })
        return tempArray;
    }
    return <div
        className={`${styles["container"]} ${styles[props.showOrHiddenOtherProfessionalSkills ? "show-container" : ""]}`}>
        <div className={styles["title"]}><span className={"iconfont icon-shuba"}></span>其他技能</div>
        <div className={styles["content"]}>
            {initOtherProfessionalSkillsTag()}
        </div>
    </div>
}
export default OtherProfessionalSkills;